<template>
<!--  日历饼图-->
  <div id="calendar-pie" style="height: 400px; width: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import {format} from "date-fns";

export default {
  name: "CalendarPie",
  data() {
    return {
      // 大小
      cellSize : [80, 80],
      // 半径
      pieRadius : 30,
      // 离散数据
      scatterData: this.getVirtualData(),
      pieInitialized: false,
      myChart: null
    }
  },
  computed: {
    // 日期
    startDate: function () {
      return format(new Date(), 'yyyy-MM') + '-01'
    },
    endDate: function () {
      let month = '0' + (new Date().getMonth()+2)
      let year = new Date().getFullYear()
      return year + '-' + month + '-01'
    },
    thisMonth: function () {
      return format(new Date(), 'yyyy-MM')
    }
  },
  methods: {
    myCalendarChat() {
      console.log(this.startDate)
      console.log(this.endDate)
      console.log(this.thisMonth)
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('calendar-pie'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        darkMode: true,
        color: ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'],
        tooltip : {},
        legend: {
          data: ['关机', '正常', '异常'],
          bottom: 20,
          textStyle: {
            color: '#FFF'
          }
        },
        calendar: {
          top: 'middle',
          left: 'center',
          orient: 'vertical',
          height: '98%',
          cellSize: this.cellSize,
          itemStyle: {
            color: 'rgba(0,0,0,0.1)'
          },
          yearLabel: {
            show: false,
            fontSize: 30
          },
          dayLabel: {
            margin: 20,
            firstDay: 1,
            nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          },
          monthLabel: {
            show: false
          },
          // 坐标范围
          range: ['2021-05']
        },
        series: [{
          id: 'label',
          type: 'scatter',
          coordinateSystem: 'calendar',
          symbolSize: 1,
          label: {
            show: true,
            formatter: function (params) {
              return echarts.format.formatTime('dd', params.value[0]);
            },
            offset: [-this.cellSize[0] / 2 + 10, -this.cellSize[1] / 2 + 10],
            fontSize: 14
          },
          data: this.scatterData
        }]
      }
      this.myChart.setOption(option)
    },
    // 获取虚拟数据
    getVirtualData() {
      let date = +echarts.number.parseDate('2021-05-01');
      let end = +echarts.number.parseDate('2021-06-01');
      let dayTime = 3600 * 24 * 1000;
      let data = [];
      for (let time = date; time < end; time += dayTime) {
        data.push([
          echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 10000)
        ]);
      }
      return data;
    },
    getPieSeries(scatterData, chart) {
      let pieRadius = this.pieRadius
      return scatterData.map(function (item, index) {
        let center = chart.convertToPixel('calendar', item);
        return {
          id: index + 'pie',
          type: 'pie',
          center: center,
          label: {
            normal: {
              formatter: '{c}',
              position: 'inside'
            }
          },
          radius: pieRadius,
          data: [
            {name: '关机', value: Math.round(Math.random() * 24)},
            {name: '正常', value: Math.round(Math.random() * 24)},
            {name: '异常', value: Math.round(Math.random() * 24)}
          ]
        };
      });
    },
    getPieSeriesUpdate(scatterData, chart) {
      return scatterData.map(function (item, index) {
        let center = chart.convertToPixel('calendar', item);
        return {
          id: index + 'pie',
          center: center
        };
      });
    },
    setTimer() {
      setTimeout(() => {
        this.pieInitialized = true;
        this.myChart.setOption({
          series: this.getPieSeries(this.scatterData, this.myChart)
        });
      }, 10);
    }
  },
  mounted() {
    this.myCalendarChat()
    window.onresize = () => {
      if (this.pieInitialized) {
        this.myChart.setOption({
          series: this.getPieSeriesUpdate(this.scatterData, this.myChart)
        });
      }
    }
    this.setTimer()
  },
  //注销window.onresize事件
  destroyed(){
    window.onresize = null;
  }
}
</script>

<style scoped>

</style>